<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-05-11 16:45:37
 * @LastEditTime: 2019-05-11 16:45:37
 * @LastEditors: your name
 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <!-- SEO -->
    <meta name="author" content="bytom.io" />
    <meta name="description" content="" />
    <meta name="keywords" content="bytom,bytom.io" />

    <!-- Favicons -->
    <link rel="shortcut icon" href="images/favicon.ico" />

    <!-- Page Title -->
    <title>Bytom DevCon2</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom Google Font : Open Sans & Montserrat -->
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,600"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Plugins -->
    <link href="css/plugins/animate.css" rel="stylesheet" />
    <link href="css/plugins/slick.css" rel="stylesheet" />
    <link href="css/plugins/magnific-popup.css" rel="stylesheet" />
    <link href="css/plugins/font-awesome.css" rel="stylesheet" />
    <link href="css/plugins/streamline-icons.css" rel="stylesheet" />

    <!-- Event Style -->
    <link href="css/event.css" rel="stylesheet" />

    <!-- Color Theme -->
    <!-- Options: green, purple, red, yellow, mint, blue, black  -->
    <link href="css/themes/blue.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="js/ie/respond.min.js"></script>
    <![endif]-->

    <!-- Modernizr -->
    <link href="css/bytom.css?v=15" rel="stylesheet" />
    <script src="js/modernizr.min.js"></script>
    <!-- Subtle Loading bar -->
    <script src="js/plugins/pace.js"></script>
  </head>

  <body
    class="animate-page"
    data-spy="scroll"
    data-target="#navbar"
    data-offset="100"
  >
    <!--Preloader div-->
    <div class="img-bytom"><img width="0" hight="0" src="images/devcon/bytom.png" alt=""></div>
    <div class="preloader"></div>

    <header id="top" class="header-video-module">
      <div class="video-container">
        <div class="header">
          <div class="container">
            <h1 class="homeTitle headline wow fadeInDown" data-wow-delay="0.1s">
              Bytom DevCon2
            </h1>
            <div class="when_where wow fadeIn" data-wow-delay="0.4s">
              <p class="event_when">August 24th 2019</p>
              <p class="event_where">San Francisco, U.S</p>
            </div>
            <div class="header_bottom-bg">
              <a
                class="btn btn-signup btn-default btn-xl wow zoomIn"
                data-wow-delay="0.3s"
                target="_blank"
                href="http://blockchain1.mikecrm.com/NNFBGzK"
                >SIGN UP</a
              >
            </div>
          </div>
        </div>

        <div class="filter"></div>
        <video
          id="video"
          autoplay="true"
          preload="true"
          poster="video/event-video.jpg"
          loop
          class="fillWidth video-header"
        >
          <source
            src="images/devcon/bytom.mp4"
            type="video/mp4"
          />
        </video>
        <!-- <div class="poster hidden">
                <img src="video/event-video.jpg" alt="event video poster">
            </div> -->
      </div>
    </header>

    <!-- 
     Highlight Section
     ====================================== -->

    <section class="highlight">
      <div class="container">
        <p class="lead text-center">
          The blockchain, as a disruptive innovation, has gradually been
          recognized by the world. As <br />
          the global leading blockchain project, bytom has been committed to the
          popularization <br />
          and research of blockchain technology.
        </p>

        <div class="countdown_wrap">
          <h6 class="countdown_title text-center">EVENT WILL START IN</h6>

          <!-- Countdown JS for the Event Date Starts here.
    TIP: You can change your event time below in the Same Format.  -->

          <ul id="countdown" data-event-date="25 august 2019 00:00:00">
            <li class="wow zoomIn" data-wow-delay="0s">
              <span class="days">00</span>
              <p class="timeRefDays">days</p>
            </li>
            <li class="wow zoomIn" data-wow-delay="0.2s">
              <span class="hours">00</span>
              <p class="timeRefHours">hours</p>
            </li>
            <li class="wow zoomIn" data-wow-delay="0.4s">
              <span class="minutes">00</span>
              <p class="timeRefMinutes">minutes</p>
            </li>
            <li class="wow zoomIn" data-wow-delay="0.6s">
              <span class="seconds">00</span>
              <p class="timeRefSeconds">seconds</p>
            </li>
          </ul>
        </div>
        <!-- end .countdown_wrap -->

        <!-- <div class="text-center">
                <span class="addtocalendar atc-style-theme">
                <a class="atcb-link"><i class="fa fa-calendar"> </i> Add to My Calendar</a>
                  <var class="atc_event">
                      <var class="atc_date_start">2016-05-04 12:00:00</var>
                      <var class="atc_date_end">2016-05-04 18:00:00</var>
                      <var class="atc_timezone">Europe/London</var>
                      <var class="atc_title">Gather Event template</var>
                      <var class="atc_description">Gather is a responsive event template with many awesome features including add to my calendar feature. Awesome. huh?</var>
                      <var class="atc_location">Stockholm, Sweden</var>
                      <var class="atc_organizer">Surjith S M</var>
                      <var class="atc_organizer_email">test@surjithctly.in</var>
                  </var>
               </span>
            </div> -->
      </div>
      <!-- end .container -->
    </section>
    <!-- end section.highlight -->

    <!-- 
     Our Schedule
     ====================================== -->

    <section class="schedule" id="schedule">
      <div class="container">
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">The <span>Schedule</span></h4>
        </div>
        <div class="nav-center">
          <!-- Nav tabs -->
          <ul class="nav nav-pills" role="tablist" id="schedule-tabs">
            <li role="presentation" class="active">
              <a href="#day1" aria-controls="day1" role="tab" data-toggle="tab"
                >TimeStamp</a
              >
            </li>
            <!-- <li role="presentation">
              <a href="#day2" aria-controls="day2" role="tab" data-toggle="tab"
                >Agenda</a
              >
            </li> -->
          </ul>
        </div>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="day1">
            <section class="timeline">
              <div class="timeline-block">
                <div
                  class="timeline-bullet wow zoomIn"
                  data-wow-delay="0s"
                ></div>
                <!-- timeline-bullet -->

                <div class="timeline-content">
                  <h2 class="wow flipInX" data-wow-delay="0.3s">
                    Dev Competition launching ceremony
                  </h2>
                  <span class="date wow flipInX" data-wow-delay="0.3s"
                    >May 14th</span
                  >
                </div>
                <!-- timeline-content -->
              </div>
              <!-- timeline-block -->

              <div class="timeline-block">
                <div
                  class="timeline-bullet wow zoomIn"
                  data-wow-delay="0s"
                ></div>
                <!-- timeline-bullet -->

                <div class="timeline-content">
                  <h2 class="wow flipInX" data-wow-delay="0.3s">Sign up</h2>
                  <!-- <p class="wow flipInX" data-wow-delay="0.3s">by Jamie Hefford</p> -->
                  <span class="date wow flipInX" data-wow-delay="0.3s"
                    >5.14th - 8.2nd</span
                  >
                </div>
                <!-- timeline-content -->
              </div>
              <!-- timeline-block -->

              <div class="timeline-block">
                <div
                  class="timeline-bullet wow zoomIn"
                  data-wow-delay="0s"
                ></div>
                <!-- timeline-bullet -->

                <div class="timeline-content">
                  <h2 class="wow flipInX" data-wow-delay="0.3s">Preliminary</h2>
                  <!-- <p class="wow flipInX" data-wow-delay="0.3s">by George Burton</p> -->
                  <span class="date wow flipInX" data-wow-delay="0.3s"
                    >August 3rd-August 7th</span
                  >
                </div>
                <!-- timeline-content -->
              </div>
              <!-- timeline-block -->

              <div class="timeline-block">
                <div
                  class="timeline-bullet wow zoomIn"
                  data-wow-delay="0s"
                ></div>
                <!-- timeline-bullet -->

                <div class="timeline-content">
                  <h2 class="wow flipInX" data-wow-delay="0.3s">
                    The Final list
                  </h2>
                  <span class="date wow flipInX" data-wow-delay="0.3s"
                    >August 8th</span
                  >
                </div>
                <!-- timeline-content -->
              </div>
              <!-- timeline-block -->

              <div class="timeline-block">
                <div
                  class="timeline-bullet wow zoomIn"
                  data-wow-delay="0s"
                ></div>
                <!-- timeline-bullet -->

                <div class="timeline-content">
                  <h2 class="wow flipInX" data-wow-delay="0.3s">
                    Project optimization
                  </h2>
                  <span class="date wow flipInX" data-wow-delay="0.3s"
                    >Aug 8th-Aug 20th</span
                  >
                </div>
                <!-- timeline-content -->
              </div>
              <!-- timeline-block -->

              <!-- timeline-block -->

              <div class="timeline-block">
                <div
                  class="timeline-bullet wow zoomIn"
                  data-wow-delay="0s"
                ></div>
                <!-- timeline-bullet -->

                <div class="timeline-content">
                  <h2 class="wow flipInX" data-wow-delay="0.3s">DevCon2</h2>
                  <span class="date wow flipInX" data-wow-delay="0.3s"
                    >Aug 24th</span
                  >
                </div>
                <!-- timeline-content -->
              </div>
              <!-- timeline-block -->
            </section>
            <!-- timeline -->

            <!-- ########### End Schedule Timeline  DAY 01  ########### -->
          </div>
          <div role="tabpanel" class="tab-pane img" id="day2">
            <img src="images/devcon/Agenda.png" alt="">
          </div>
        </div>
      </div>
      <!-- end .container -->
    </section>

    <section class="speakers" id="speakers">
      <div class="container">
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">OUR <span>SPEAKERS</span></h4>
        </div>
        <div class="bytom-speakers">
          <div class="speaker-info wow fadeIn" data-wow-delay="0s">
            <img
              src="images/devcon/Speaker/01-02-duanxinxing.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>Xinxing Duan</p>
            <span>Bytom , Founder and CEO</span>
          </div>

          <div class="speaker-info wow fadeIn" data-wow-delay="0.1s">
            <img
              src="images/devcon/Speaker/01-03-langyu.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>Yu Lang</p>
            <span>Bytom , CTO</span>
          </div>

          <div class="speaker-info wow fadeIn" data-wow-delay="0.2s">
            <img
              src="images/devcon/Speaker/01-04-jinlei.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>Lei Jin</p>
            <span>Bytom , CO-CTO</span>
          </div>

          <div class="speaker-info wow fadeIn" data-wow-delay="0.3s">
            <img
              src="images/devcon/Speaker/02-01-zhuyiqi.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>James</p>
            <span>Bytom , VP Engineering</span>
          </div>

          <div class="speaker-info wow fadeIn" data-wow-delay="0.4s">
            <img
              src="images/devcon/Speaker/02-10-wangwei.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>Wang Wei</p>
            <span>Bytom , BBFT Presenter</span>
          </div>
        </div>
        <!-- <div class="bytom-speakers">
          <div class="speaker-info wow fadeIn" data-wow-delay="0.4s">
            <img
              src="images/devcon/Speaker/05.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>Sili Zhao</p>
            <span>Infstone</span>
          </div>
          <div class="speaker-info wow fadeIn" data-wow-delay="0.4s">
            <img
              src="images/devcon/Speaker/06.png"
              alt="avatar"
              class="img-responsive center-block"
            />
            <p>Daniel Yan</p>
            <span>Matrixport, Senior VP of Trading Founding Partner</span>
          </div>
          <div class="speaker-info wow fadeIn"></div>
          <div class="speaker-info wow fadeIn"></div>
          <div class="speaker-info wow fadeIn"></div>
        </div> -->
      </div>
    </section>

    <section class="reward">
      <div class="section-title wow fadeInUp">
        <h4 class="bytom-block-title">The <span>Reward</span></h4>
      </div>
      <img class="reward-img" src="images/devcon/reward.png" alt="" />
      <div class="row reward-web">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail wow fadeInUp">
            <div style="float: right" class="caption">
              <h6 class="caption-title">Third Prize</h6>
              <p class="caption-text">3 Projects</p>
              <p class="btm">BTM equivalent of $10,000</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail wow fadeInUp" data-wow-delay="0.3s">
            <div class="caption">
              <h6 class="caption-title">First Prize</h6>
              <p class="caption-text">1 Project</p>
              <p class="btm">BTM equivalent of $30,000</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0">
          <div
            style="float: left"
            class="thumbnail wow fadeInUp"
            data-wow-delay="0.6s"
          >
            <div class="caption">
              <h6 class="caption-title">Second Prize</h6>
              <p class="caption-text">2 Projects</p>
              <p class="btm">BTM equivalent of $15,000</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row reward-mobile">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail wow fadeInUp" data-wow-delay="0.3s">
            <div class="caption">
              <h6 class="caption-title">First Prize</h6>
              <p class="caption-text">1 Project</p>
              <p class="btm">BTM equivalent of $30,000</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0">
          <div class="thumbnail wow fadeInUp" data-wow-delay="0.6s">
            <div class="caption">
              <h6 class="caption-title">Second Prize</h6>
              <p class="caption-text">2 Projects</p>
              <p class="btm">BTM equivalent of $10,000</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail wow fadeInUp">
            <div class="caption">
              <h6 class="caption-title">Third Prize</h6>
              <p class="caption-text">3 Projects</p>
              <p class="btm">BTM equivalent of $5,000</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="benefits">
      <div class="container">
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">What to <span>expect</span></h4>
        </div>
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <div class="row">
              <div class="col-sm-6">
                <div class="benefit-item wow fadeInLeft">
                  <div class="benefit-icon">
                    <img src="images/devcon/icon-1@2x.png" alt="" />
                  </div>
                  <!-- <h6 class="benefit-title">One great night</h6> -->
                  <p>Technical guidance, business incubation</p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="benefit-item wow fadeInRight">
                  <div class="benefit-icon">
                    <img src="images/devcon/icon-2@2x.png" alt="" />
                  </div>
                  <!-- <h6 class="benefit-title">Location</h6> -->
                  <p>
                    Excellent and innovative projects, Strategic investment from
                    Bytom
                  </p>
                </div>
              </div>

              <div class="col-sm-6">
                <div class="benefit-item wow fadeInLeft">
                  <div class="benefit-icon">
                    <img src="images/devcon/icon-3@2x.png" alt="" />
                  </div>
                  <!-- <h6 class="benefit-title">Free food and drink!</h6> -->
                  <p>Best judge team, high-profile figures</p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="benefit-item wow fadeInRight">
                  <div class="benefit-icon">
                    <img src="images/devcon/icon-4@2x.png" alt="" />
                  </div>
                  <!-- <h6 class="benefit-title">Accommodation</h6> -->
                  <p>Exclusive interview, enormous media exposure</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end .container -->
    </section>

    <!-- 
     Accommodation
     ====================================== -->

    <section class="highlight accommodation">
      <div class="container">
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">Bytom <span>DevCon</span></h4>
        </div>

        <div class="des">
          Based on this background, after the successful launch of the first
          Bytom Devcon in 2018, with the purpose of further promoting the
          application of blockchain technology, developing the sustainable open
          source ecology and motivating developer talents. The second Bytom
          Devcon will be held in September 2019, and we hope to meet you all at
          Bytom Devcon!
        </div>

        <div class="row">
          <div class="col-sm-6 col-md-6">
            <div class="thumbnail wow fadeInUp">
              <img
                src="images/devcon/ZB0A1521@2x.png"
                alt="Atholl Palace Hotel"
              />
            </div>
          </div>
          <div class="col-sm-3 col-md-3">
            <div class="thumbnail wow fadeInUp" data-wow-delay="0.3s">
              <img
                src="images/devcon/DQ3A4912@2x.png"
                alt="The Four Seasons Hotel"
              />
            </div>
            <div class="thumbnail wow fadeInUp" data-wow-delay="0.3s">
              <img
                src="images/devcon/DQ3A5095@2x.png"
                alt="The Four Seasons Hotel"
              />
            </div>
          </div>
          <div class="col-sm-3 col-md-3">
            <div class="thumbnail wow fadeInUp" data-wow-delay="0.3s">
              <img
                src="images/devcon/IMG_0118@2x.png"
                alt="The Four Seasons Hotel"
              />
            </div>
            <div class="thumbnail wow fadeInUp" data-wow-delay="0.3s">
              <img
                src="images/devcon/DQ3A5270@2x.png"
                alt="The Four Seasons Hotel"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- end .container -->
    </section>

    <section>
      <div class="container">
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">Partner</h4>
        </div>
        <div class="partner"></div>
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">Media</h4>
        </div>
        <div class="media-web">
          <div class="nav-center">
            <ul class="nav nav-pills" role="tablist" id="media-tabs">
              <li role="presentation" class="active">
                <a
                  href="#photos"
                  aria-controls="photos"
                  role="tab"
                  data-toggle="tab"
                  aria-expanded="true"
                  >International Media Report</a
                >
              </li>
              <li role="presentation" class="">
                <a
                  href="#videos"
                  aria-controls="videos"
                  role="tab"
                  data-toggle="tab"
                  aria-expanded="false"
                  >Chinese Media Partner</a
                >
              </li>
            </ul>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="photos">
              <img
                src="images/devcon/Media/Web-InternationalMediaReport.png"
                alt=""
              />
            </div>
            <div role="tabpanel" class="tab-pane" id="videos">
              <img src="images/devcon/Media/Chinese Media Partner.png" alt="" />
            </div>
          </div>
        </div>
        <div class="media-mobile">
          <p>International Media Report</p>
          <img
            src="images/devcon/Media/Wap-InternationalMediaReport.png"
            alt=""
          />
          <p>Chinese Media Partner</p>
          <img src="images/devcon/Media/Wap-Chinese Media Partner.png" alt="" />
        </div>
      </div>
    </section>

    <section style="padding-bottom: 60px">
      <div class="container">
        <div class="section-title wow fadeInUp">
          <h4 class="bytom-block-title">Venue</h4>
          <div class="bytom-info">
            Fort Mason - Cowell Theater, 2 Marina Blvd, San Francisco, CA 94123
          </div>
        </div>
        <div class="bytom-map">
          <iframe
            width="100%"
            height="500"
            frameborder="0"
            scrolling="no"
            marginheight="0"
            marginwidth="0"
            src="https://www.openstreetmap.org/export/embed.html?bbox=-122.44116783142091%2C37.80246004886268%2C-122.42325067520142%2C37.81020776782324&amp;layer=mapnik"
            style="border: 1px solid black"
          ></iframe>
        </div>
      </div>
    </section>

    <section class="pricing" id="pricing">
      <div class="container">
        <div class="section-title">
          <h4>PRICING</h4>
        </div>
        <div class="row">
          <div class="col-md-6 prices wow zoomIn"
            data-wow-delay="0.3s"
            data-wow-duration="2s">
              <img src="images/devcon/WechatIMG1807.png" alt="">
          </div>
          <div class="col-md-6">
            <div
              class="pricing-item highlighted-plan wow zoomIn"
              data-wow-delay="0.3s"
              data-wow-duration="2s"
            >
              <div class="plan-name">General Visit</div>
              <div class="price"><span class="curr">$</span>69.99</div>
              <ul class="plan-features">
                <li>Front Seating</li>
                <li>Free Coffee / Snacks</li>
                <li>Free T-Shirt</li>
              </ul>
              <a class="btn btn-success btn-lg" target="_blank" href="https://www.eventbrite.com/e/2019-bytom-global-blockchain-devcon-tickets-65496402503">Tickets</a>
            </div>
          </div>
          
        </div>
      </div>
    </section>

    <section style="background-color: #F8F8F8;" class="benefits">
      <div class="container">
        <div class="note">
          <h4 class="bytom-block-title"><span>Points</span> to note</h4>
          <ol>
            <li>
              Each participant group should include no more than five
              members.Individual participants can team up freely,but every one
              can only join one group and cannot enter the competition
              repeatedly.
            </li>
            <li>
              Entries must be completed independently.No cheating or
              infringement of intellectual property is allowed. Entrants failing
              in doing so will be disqualified.
            </li>
            <li>
              Projects must be built on Bytom ecosystem or Bytom smart contract.
            </li>
            <li>
              Entrants submit project based on Bytom.After being reviewed by the
              Organizing Committee,it will be selected to enter the competition
              for further improvement.
            </li>
            <li>
              Before entry submission is closed,entrants can keep improving
              their works,but cannot change the topic.The final entry should be
              based on the latest version submitted before the submission
              deadline.(If there are important reasons that cannot be submitted
              before the deadline,please contact the official in advance,but no
              later than Aug.8,so as not to affect the official final list. )
            </li>
            <li>
              Entries must be submitted in the prescribed form.Otherwise they
              will be phased out directly.Please upload your codes on GitHub.
            </li>
            <li>
              Anyone belonging to the organizers of the Event and members of
              judgement cannot take part in the competition.
            </li>
          </ol>
        </div>
      </div>
    </section>

    <!-- <div class="container" id="contact">
        <div class="section-title">
            <h5>SEND US A MESSAGE</h5>
            <p>If you have any questions about the event, please contact us directly. We will respond for sure.</p>
        </div>

        <div class="contact-form bottom-space-xl wow fadeInUp">

            <form action="php/contact.php" id="phpcontactform" method="POST">
                <div class="row">

                    <div class="col-md-6 col-md-offset-3">

                        <div class="row">

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>First Name</label>
                                    <input type="text" class="form-control" name="first_name" placeholder="First Name" required>

                                </div>

                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Last Name</label>
                                    <input type="text" class="form-control" name="last_name" placeholder="last name" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Email ID</label>
                            <input type="email" class="form-control" name="email" placeholder="Email Address" required>
                        </div>
                        <div class="form-group">
                            <label>Phone Number</label>
                            <input type="text" class="form-control" name="phone" placeholder="Phone Number" required>
                        </div>

                        <div class="form-group">
                            <label>Your Message</label>
                            <textarea class="form-control" name="message" rows="6" placeholder="Enter your message here" required> </textarea>
                        </div>

                        <div class="text-center top-space">
                            <button type="submit" class="btn btn-success btn-block btn-lg" id="js-contact-btn">Send Message</button>
                            <div id="js-contact-result" data-success-msg="Form submitted successfully." data-error-msg="Oops. Something went wrong."></div>
                        </div>

                    </div>
                </div>
            </form>
        </div>

    </div> -->
    <!-- // end .container -->

    <!-- 
     Footer Call to Action
     ====================================== -->

    <section class="footer-action">
      <div class="container">
        <h4 class="headline-support wow fadeInDown">LETS GATHER TOGETHER</h4>
        <h2 class="headline wow fadeInDown" data-wow-delay="0.1s">
          Join the Bytom DevCon2
        </h2>

        <div class="footer_bottom-bg">
          <a
            class="btn btn-success btn-xl zoomIn"
            target="_blank"
            href="http://blockchain1.mikecrm.com/NNFBGzK"
            >SIGN UP</a
          >
        </div>
      </div>
    </section>
    <!-- end section.footer-action -->

    <footer>
      <div class="social-icons">
        <a href="https://twitter.com/Bytom_Official" class="wow zoomIn">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="https://www.facebook.com/bytomofficial/" class="wow zoomIn">
          <i class="fa fa-facebook"></i>
        </a>
        <a href="https://weibo.com/u/5966947038?refer_flag=1001030101_" class="wow zoomIn">
          <i class="fa fa-weibo"></i>
        </a>
        <a href="https://www.linkedin.com/company/bytom-foundation" class="wow zoomIn">
          <i class="fa fa-linkedin"></i>
        </a>
        <a
          href="https://www.facebook.com/bytomofficial/"
          class="wow zoomIn"
          data-wow-delay="0.2s"
        >
          <i class="fa fa-facebook"></i>
        </a>
      </div>
      <p class="contact">
        <span><i>Business :</i> zhangx@bytom.io</span>
        <span><i>Media :</i> reny@bytom.io</span>
        <span><i>Consult :</i> contact@bytom.io</span>
        <span><i>Speaker :</i> zoepeng@bytom.io</span>
      </p>
      <p>
        <small class="text-muted"
          >Copyright © 2019. All rights reserved. Bytom.io</small
        >
      </p>
    </footer>

    <!-- <a href="#top" class="back_to_top"><img src="images/back_to_top.png" alt="back to top"></a> -->

    <!-- jQuery Library -->
    <script src="js/jquery.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="js/bootstrap.min.js"></script>

    <!-- 3rd party Plugins -->
    <script src="js/plugins/countdown.js"></script>
    <script src="js/plugins/wow.js"></script>
    <script src="js/plugins/slick.js"></script>
    <script src="js/plugins/magnific-popup.js"></script>
    <!-- <script src="js/plugins/validate.js"></script> -->
    <script src="js/plugins/appear.js"></script>
    <script src="js/plugins/count-to.js"></script>
    <!-- <script src="js/plugins/nicescroll.js"></script> -->

    <!-- Google Map -->
    <!-- <script src="js/plugins/infobox.js"></script> -->
    <!-- <script src="js/plugins/google-map.js"></script> -->
    <!-- <script src="js/plugins/directions.js"></script> -->

    <!-- JS Includes -->
    <!-- <script src="js/includes/subscribe.js"></script> -->
    <!-- <script src="js/includes/contact_form.js"></script> -->

    <!-- Main Script -->
    <script src="js/main.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-139977346-1"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-139977346-1");

      $(function() {
        var videoPlayer = setInterval(() => {
          var video = document.getElementById("video");
          if (video && video.readyState === 4) {
            try {
              var playPromise = video.play();
              if (playPromise !== undefined) {
                playPromise
                  .then(_ => {})
                  .catch(error => {
                    console.log(error);
                  });
              }
              clearInterval(videoPlayer);
            } catch (error) {
              console.log(error);
            }
          }
        }, 100);
      });
    </script>
  </body>
</html>
